<template>
  <div class="diskInfoWrap">
    <div class="head" >
      <p class="colCLas"></p>
      <p class="info">税收分类编码信息</p>
    </div>

    <el-form
        :inline="true"
        :model="searchParams"
        style="width: 100%"
        size="small"
        class="formInline"
    >
      <el-form-item
          label="商品和服务税收分类合并编码"
      >
        <el-input
            style="width: 200px"
            v-model="searchParams.input1"
            placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品和服务名称"           >
        <el-input
            style="max-width: 160px"
            v-model="searchParams.input2"
            placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品和服务分类简称" >
        <el-input
            style="width: 160px"
            v-model="searchParams.input3"
            placeholder="请输入"
        ></el-input>
      </el-form-item>

      <el-form-item >
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onResize">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button
        type="primary"
        size="small"
        @click="getDiskInfo"
        style="margin: 4px 0"
    >
      获取纳税分类编码信息
    </el-button>
    <el-button type="primary" @click="getHistory" size="small" style="margin: 0 16px">
      获取记录
    </el-button>
    <el-button
        type="primary"
        @click="exportFn"
        size="small"
        style="margin: 4px 0"
    >
      导出
    </el-button>
    <div style="display: inline-block; margin-left: 12px" v-if="time">
      最后更新时间： {{ time }}
    </div>

    <tableList
        :showIndex="true"
        :loading="loading"
        border
        :heightMin="130"
        :pageNumber="pages.current"
        :pageSize="pages.size"
        :total="pages.total"
        :keySet="keySet"
        :autoHeight="true"
        :tableData="listDetails"
        :paginationShow="true"
        :handlerShow="true"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        handlerShowWidth="60"
    >
      <template #handler="{ row }">
        <el-popover placement="right" width="1000" trigger="click">
          <el-table v-loading="loadingPop" :data="gridData">
            <el-table-column
                width="100"
                property="hydm"
                label="行业代码"
            ></el-table-column>
            <el-table-column
                width="100"
                property="dydhy"
                label="对应的行业"
            ></el-table-column>
            <el-table-column
                width="170"
                property="hydydzspm1"
                label="行业对应的征收品目一"
            ></el-table-column>
            <el-table-column
                width="170"
                property="hydydzsmc1"
                label="行业对应的征收名称一"
            ></el-table-column>
            <el-table-column
                width="170"
                property="hydydzspm2"
                label="行业对应的征收品目二"
            ></el-table-column>
            <el-table-column
                width="170"
                property="hydydzsmc2"
                label="行业对应的征收名称二"
            ></el-table-column>
          </el-table>
          <div
              slot="reference"
              class="worldBlueBtn"
              @click="getHangye(row)"
          >
            查看
          </div>
        </el-popover>
      </template>
    </tableList>

    <vxe-modal
        v-model="historyDialog"
        title="获取记录"
        width="900"
        min-width="900"
        height="600"
        resize
        remember
        fullscreen
    >
      <template v-slot>
        <getHistoryCom
            v-if="historyDialog"
            title="税收分类编码"
            source="taxClass"
        ></getHistoryCom>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import getHistoryCom from '../baseInfo/components/getHistory.vue'
import tableList from '@/components/tableList/index.vue'
import {throttle} from 'lodash'
import { getHyListByCode,getCodePage2, addCodePage } from '@/api/vmsClassifyCode.js'
import { exportCode } from '@/api/fileDownload.js'

export default {
  name: 'taxClass',
  mixins: [mixinTable],
  data() {
    return {
      time: '',
      loadingPop: false,
      gridData: [],
      historyDialog: false,

      listDetails: [],
      keySet: [
        {
          label: '父级编码',
          englishName: 'fjbm',
          width: 70
        },
        {
          label: '商品和服务税收分类合并编码',
          englishName: 'sphfwssflhbbm',
          width: 180,
          align: 'center',
        },
        {
          label: '特定要素标签归类',
          englishName: 'tdyslxdm',
          width: 120,
          align: 'center',
        },
        {
          label: '差额征税',
          englishName: 'cezs',
          width: 70,
        },
        {
          label: '不征税',
          englishName: 'bzs',
          width: 60,
        },
        {
          label: '即征即退代码集合',
          englishName: 'jzjtdm',
          width: 160,
          align: 'center',
        },
        {
          label: '商品和服务名称',
          englishName: 'sphfwmc',
          width: 130,
          align: 'center',
        },
        {
          label: '商品和服务分类简称',
          englishName: 'sphfwfljc',
          width: 130,
          align: 'center',
        },
        {
          label: '说明',
          englishName: 'sm',
          width: 70,
        },
        {
          label: '增值税税率',
          englishName: 'zzssl',
          width: 90,
        },
        {
          label: '征收率',
          englishName: 'zsl',
          width: 80,
        },
        {
          label: '增值税特殊管理',
          englishName: 'zzstsgl',
          width: 110,
        },
        {
          label: '增值税政策依据',
          englishName: 'zzszcyj',
          width: 110,
        },
        {
          label: '增值税特殊内容代码',
              // '（增值税减免税政策代码表）',
          englishName: 'zzstsnrdm',
          width: 130,
          align: 'center',
        },
        {
          label: '消费税管理',
          englishName: 'xfsgl',
          width: 90,
        },
        {
          label: '消费税政策依据',
          englishName: 'xfszcyj',
          width: 110,
          align: 'center',
        },
        {
          label: '消费税特殊内容代码',
          englishName: 'xfstsnrdm',
          width: 130,
          align: 'center',
        },
        {
          label: '关键字',
          englishName: 'gjz',
          width: 70,
        },
        {
          label: '是否汇总项',
          englishName: 'sfhzx',
          width: 90,
        },
        {
          label: '对应统计局编码（2011年版）或国民行业代码',
          englishName: 'dytjjbm',
          width: 'labelWidth',
          align: 'center',
        },
        {
          label: '海关进出口商品品目',
          englishName: 'hgjcksppm',
          width: 130,
          align: 'center',
        },
        {
          label: '启用日期',
          englishName: 'qyrq',
          width: 80,
        },
        {
          label: '停用日期',
          englishName: 'tyrq',
          width: 80,
        },
        /*   {
            label: '行业代码',
            englishName: 'appName',
            width: 'labelWidth'
        },
        {
            label: '对应的行业',
            englishName: 'appName',
            width: 'labelWidth'
        },
        {
            label: '行业对应的征收品目一',
            englishName: 'appName',
            width: 'labelWidth',
            align:'center'
        },
        {
            label: '行业对应的征收名称一',
            englishName: 'appName',
            width: 'labelWidth',
            align:'center'
        },
        {
            label: '行业对应的征收品目二',
            englishName: 'appName',
            width: 'labelWidth',
            align:'center'
        },
        {
            label: '行业对应的征收名称二',
            englishName: 'appName',
            width: 'labelWidth',
            align:'center'
        }, */
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    onSubmit() {
      this.getList()
    },
    onResize() {
      this.onResizeFn()
      this.getList()
    },
    getList: throttle(async function (params) {
      this.loading = true
      let {data, code, message} = await getCodePage2(
          {
            sphfwssflhbbm: this.searchParams.input1,
            sphfwmc: this.searchParams.input2,
            sphfwfljc: this.searchParams.input3,
            pageNo: this.pages.current,
            pageSize: this.pages.size,
          }
      )
      if (code == 200) {
        this.loading = false
        this.listDetails = data.records
        this.time = data.records[0]?.createTime

        this.pages.total = data.total
        this.pages.current = data.current
        this.pages.size = data.size

      } else {
        this.$message({
          type: 'success',
          message: message,
        })
      }
      this.loading = false
    }, 500),
    getDiskInfo() {
      this.$alert('是否调用接口获取税收分类编码？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        type: 'warning',
      }).then(async () => {
        let {data, code, message} = await addCodePage(
            {},
        )
        if (code == 200) {
          this.onResize()
        } else {
          this.$message({
            type: 'success',
            message: message,
          })
        }
      })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
    },
    getHistory() {
      this.historyDialog = true
    },
    async getHangye(row) {
      this.loadingPop = true
      let {data, code, message} = await getHyListByCode(
          {
            id: row.id,
          }
      )
      if (code == 200) {
        this.gridData = data
      } else {
        this.$message({
          type: 'success',
          message: message,
        })
      }
      this.loadingPop = false
    },

    exportFn() {
      exportCode( {
        findType: this.findType,
        sphfwssflhbbm: this.searchParams.input1,
        sphfwmc: this.searchParams.input2,
        sphfwfljc: this.searchParams.input3,
        pageNo: this.pages.current,
        pageSize: this.pages.size,
      })
    },
  },
  components: {
    tableList,
    getHistoryCom,
  },
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.diskInfoWrap {
  box-sizing: border-box;
  // padding: 10px;
  .head {
    display: flex;
    height: 18px;
    align-items: center;

    .colCLas {
      width: 4px;
      height: 100%;
      background-color: $allBg;
      margin-right: 12px;
    }

    .info {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .formInline :deep .el-form-item--small {
    margin-bottom: 4px;
  }
}
</style>
